<!-- src/components/GlobalToast.vue -->
<script lang="ts" setup>
import { useToast } from "wot-design-uni"
import { useGlobalLoading } from "@/stores";
import { getCurrentPath } from "@/utils";
const store = useGlobalLoading();
const { loadingOptions, currentPage, currentKey } = storeToRefs(store)

const toast = useToast('globalLoading')
// @ts-ignore
const currentPath = getCurrentPath()

// 支付宝小程序兼容性处理
// #ifdef MP-ALIPAY
const hackAlipayVisible = ref(false)
nextTick(() => {
  hackAlipayVisible.value = true
})
// #endif

// 监听全局状态变化
watch(currentKey, () => {
  if (currentKey.value>=0){
    if (currentPage.value === currentPath) {
      if (loadingOptions.value.show){
        toast.loading(loadingOptions.value)
      }else{
        toast.close()
      }
    }
  }else{
    toast.close()
  }
})
</script>

<script lang="ts">
export default {
  options: {
    virtualHost: true,
    addGlobalClass: true,
    styleIsolation: 'shared',
  },
}
</script>

<template>
  <!-- 支付宝小程序特殊处理 -->
  <!-- #ifdef MP-ALIPAY -->
  <wd-toast v-if="hackAlipayVisible" selector="globalLoading" :closed="store.close" />
  <!-- #endif -->
  <!-- #ifndef MP-ALIPAY -->
  <wd-toast selector="globalLoading" :closed="store.close" />
  <!-- #endif -->
</template>